<html>
<head>
    <meta charset="utf-8"/>
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <link rel="stylesheet" href="/node_modules/wangeditor/release/wangEditor.min.css">
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script  src="/node_modules/wangeditor/release/wangEditor.js"></script>
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

    <style>
        body{
            background:#ccc;
        }
        .edit-box{
            margin:auto;
            background:#fff;
        }
        .save-btn{

            line-height:50px;
            text-align: center;
            background:#666;
            color:#fff;
            font-weight: bold;
            cursor: pointer;
        }
        .title{
            width:100%;
            padding:10px 1%;
            background: #999;
        }
        .title input{
            display: block;
            width:90%;
            padding:5px;
            border-radius: 5px;
            font-weight: bold;
            border:1px solid #999;
            text-indent: 10px;
        }

        .qrimg{
            width:200px;
            height:200px;
            border:5px solid #888;
            display: block;
            float: left;
        }

        .link{
            padding:5px;
            border:10px solid #999;
        }
        #linka{
            margin-left:10px;
        }
    </style>
</head>
<body>

@if($articleInfo->articleId > 0)
    <img class="qrimg" src="http://qr.liantu.com/api.php?text=http://www.baidu.com"  data-src="{{asset('/home/articleDetail?articleId=')}}">
@else
    <img class="qrimg" style="display: none;" data-src="{{asset('/home/articleDetail?articleId=')}}">
@endif

<div onclick="history.back();" style="margin:20px;width:90px;line-height:30px;background:#555;color:#fff;float:right;text-align:center;cursor: default;">返回</div>
<div style="width:700px;" class="edit-box">

    <p class="title">
        <input type="text" placeholder="请输入文章标题" id="title" value="{{$articleInfo->title}}">
        <input type="hidden" value="{{csrf_token()}}" id="token">
        <input type="hidden" value="{{$articleInfo->articleId}}" id="articleId">
    </p>

    <p class="link">
        <span>链接：</span>
        <span id="linktext"></span>
        <a  id="linka" target="_blank">查看</a>
        <a  href="{{asset('admin_system/wxedit/index')}}">新增</a>
    </p>

    <div id="editor">
        {!! $articleInfo->content !!}
    </div>
    <div class="save-btn" id="saveBtn">保存文章</div>
</div>


<script>
    window.onload= function () {
        var E = window.wangEditor;
        var editor = new E('#editor');

        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'italic',  // 斜体
            //'underline',  // 下划线
            //'strikeThrough',  // 删除线
            'fontSize',
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'link',  // 插入链接
            'list',  // 列表
            'justify',  // 对齐方式
            'quote',  // 引用
            //'emoticon',  // 表情
            'image',  // 插入图片
            'table',  // 表格
            'video',  // 插入视频
            //'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ];

        editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
        editor.customConfig.uploadImgServer = "{{asset('admin_system/wxedit/saveImg')}}";  // 上传图片到服务器
        editor.customConfig.height = "700px";
        editor.customConfig.uploadImgParams = {
            token: $('#token').val()
        };

        editor.customConfig.uploadImgParamsWithUrl = true
        console.log(editor.customConfig.uploadImgParams);
        editor.create()

        document.getElementById('saveBtn').addEventListener('click', function ()
        {
            var content = editor.txt.html();
            var title   = $('#title').val();
            var token   = $('#token').val();
            var articId = $('#articleId').val();
            var data    = {
                title:title,
                _token:token,
                articleId:articId,
                content:content
            };
            var url  = "{{asset('admin_system/wxedit/save')}}";

            $.ajax({
                url:url,
                type:'post',
                data:data
            }).success(function(res) {

                $('#articleId').val(res.data.articleId);
                alert(res.message);

            })

        }, false)


        function init()
        {
            var articleId   = $('#articleId').val();
            var link = $('.qrimg').data('src') + articleId;
            var src = "http://qr.liantu.com/api.php?text=" + link;
            $('.qrimg').attr('src',src);
            $('#linktext').text(link);
            $('#linka').attr('href',link);
        }

        init();

    }
</script>

</body>
</html>